
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengriliwu"></use>
                    </svg>
                    <div class="name">生日礼物</div>
                    <div class="fontclass">#icon-shengriliwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Txu"></use>
                    </svg>
                    <div class="name">T恤</div>
                    <div class="fontclass">#icon-Txu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuanshi"></use>
                    </svg>
                    <div class="name">钻石</div>
                    <div class="fontclass">#icon-zuanshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nvzhuangneiyi"></use>
                    </svg>
                    <div class="name">女装内衣</div>
                    <div class="fontclass">#icon-nvzhuangneiyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huwaiyundong"></use>
                    </svg>
                    <div class="name">户外运动</div>
                    <div class="fontclass">#icon-huwaiyundong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huazhuangpin"></use>
                    </svg>
                    <div class="name">化妆品</div>
                    <div class="fontclass">#icon-huazhuangpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiliuquhuodong"></use>
                    </svg>
                    <div class="name">回流区活动</div>
                    <div class="fontclass">#icon-huiliuquhuodong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-woguanzhudepinpai"></use>
                    </svg>
                    <div class="name">我关注的品牌</div>
                    <div class="fontclass">#icon-woguanzhudepinpai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shezhi"></use>
                    </svg>
                    <div class="name">设置</div>
                    <div class="fontclass">#icon-shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neiyi"></use>
                    </svg>
                    <div class="name">内衣</div>
                    <div class="fontclass">#icon-neiyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-erweima"></use>
                    </svg>
                    <div class="name">二维码</div>
                    <div class="fontclass">#icon-erweima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-questionfill"></use>
                    </svg>
                    <div class="name">question_fill</div>
                    <div class="fontclass">#icon-questionfill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ren_add"></use>
                    </svg>
                    <div class="name">人员新增</div>
                    <div class="fontclass">#icon-ren_add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji1"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuyue"></use>
                    </svg>
                    <div class="name">预约</div>
                    <div class="fontclass">#icon-yuyue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-selectionfill"></use>
                    </svg>
                    <div class="name">selection_fill</div>
                    <div class="fontclass">#icon-selectionfill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unie62f"></use>
                    </svg>
                    <div class="name">清除</div>
                    <div class="fontclass">#icon-unie62f</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-circulardownload"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-circulardownload</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duanxin"></use>
                    </svg>
                    <div class="name">短信</div>
                    <div class="fontclass">#icon-duanxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mendian"></use>
                    </svg>
                    <div class="name">门店</div>
                    <div class="fontclass">#icon-mendian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiye"></use>
                    </svg>
                    <div class="name">企业</div>
                    <div class="fontclass">#icon-qiye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mendian1"></use>
                    </svg>
                    <div class="name">门店</div>
                    <div class="fontclass">#icon-mendian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-noticefill"></use>
                    </svg>
                    <div class="name">notice_fill</div>
                    <div class="fontclass">#icon-noticefill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-notice"></use>
                    </svg>
                    <div class="name">notice</div>
                    <div class="fontclass">#icon-notice</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-brandfill"></use>
                    </svg>
                    <div class="name">brand_fill</div>
                    <div class="fontclass">#icon-brandfill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-clothesfill"></use>
                    </svg>
                    <div class="name">clothes_fill</div>
                    <div class="fontclass">#icon-clothesfill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanse"></use>
                    </svg>
                    <div class="name">颜色</div>
                    <div class="fontclass">#icon-yanse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nianhuo"></use>
                    </svg>
                    <div class="name">年货</div>
                    <div class="fontclass">#icon-nianhuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanzhang"></use>
                    </svg>
                    <div class="name">转账</div>
                    <div class="fontclass">#icon-zhuanzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoujichongzhi"></use>
                    </svg>
                    <div class="name">手机充值</div>
                    <div class="fontclass">#icon-shoujichongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gupiao"></use>
                    </svg>
                    <div class="name">股票</div>
                    <div class="fontclass">#icon-gupiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jizhang"></use>
                    </svg>
                    <div class="name">记账本</div>
                    <div class="fontclass">#icon-jizhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuaidi"></use>
                    </svg>
                    <div class="name">快递</div>
                    <div class="fontclass">#icon-kuaidi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-suishendai"></use>
                    </svg>
                    <div class="name">随身贷</div>
                    <div class="fontclass">#icon-suishendai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baozhang"></use>
                    </svg>
                    <div class="name">我的保障</div>
                    <div class="fontclass">#icon-baozhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-baobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diamond"></use>
                    </svg>
                    <div class="name">diamond</div>
                    <div class="fontclass">#icon-diamond</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sududuibi"></use>
                    </svg>
                    <div class="name">速度对比</div>
                    <div class="fontclass">#icon-sududuibi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-touzichanpin"></use>
                    </svg>
                    <div class="name">touzichanpin</div>
                    <div class="fontclass">#icon-touzichanpin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuxu"></use>
                    </svg>
                    <div class="name">chuxu</div>
                    <div class="fontclass">#icon-chuxu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">gonggao</div>
                    <div class="fontclass">#icon-gonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zizhi"></use>
                    </svg>
                    <div class="name">zizhi</div>
                    <div class="fontclass">#icon-zizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhuangdapei"></use>
                    </svg>
                    <div class="name">服装搭配</div>
                    <div class="fontclass">#icon-fuzhuangdapei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuyue1"></use>
                    </svg>
                    <div class="name">预约</div>
                    <div class="fontclass">#icon-yuyue1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-duibishitu"></use>
                    </svg>
                    <div class="name">对比视图</div>
                    <div class="fontclass">#icon-duibishitu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-799baobiao"></use>
                    </svg>
                    <div class="name">799-报表</div>
                    <div class="fontclass">#icon-799baobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouru"></use>
                    </svg>
                    <div class="name">收入</div>
                    <div class="fontclass">#icon-shouru</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifu"></use>
                    </svg>
                    <div class="name">支付</div>
                    <div class="fontclass">#icon-zhifu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baoyang"></use>
                    </svg>
                    <div class="name">保养</div>
                    <div class="fontclass">#icon-baoyang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuihuo"></use>
                    </svg>
                    <div class="name">退货</div>
                    <div class="fontclass">#icon-tuihuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tuihuo1"></use>
                    </svg>
                    <div class="name">退货</div>
                    <div class="fontclass">#icon-tuihuo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-crownfill"></use>
                    </svg>
                    <div class="name">crown_fill</div>
                    <div class="fontclass">#icon-crownfill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cuxiao"></use>
                    </svg>
                    <div class="name">促销</div>
                    <div class="fontclass">#icon-cuxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixiu"></use>
                    </svg>
                    <div class="name">维修</div>
                    <div class="fontclass">#icon-weixiu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode1"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#icon-wode1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daijinquan"></use>
                    </svg>
                    <div class="name">代金券</div>
                    <div class="fontclass">#icon-daijinquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-liebiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-distribution"></use>
                    </svg>
                    <div class="name">配送</div>
                    <div class="fontclass">#icon-distribution</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dayin-copy"></use>
                    </svg>
                    <div class="name">打印</div>
                    <div class="fontclass">#icon-dayin-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bumen"></use>
                    </svg>
                    <div class="name">部门</div>
                    <div class="fontclass">#icon-bumen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yifuchicun"></use>
                    </svg>
                    <div class="name">衣服尺寸</div>
                    <div class="fontclass">#icon-yifuchicun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wode"></use>
                    </svg>
                    <div class="name">我的</div>
                    <div class="fontclass">#icon-wode</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenpi"></use>
                    </svg>
                    <div class="name">审批</div>
                    <div class="fontclass">#icon-shenpi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon1"></use>
                    </svg>
                    <div class="name">接待</div>
                    <div class="fontclass">#icon-icon1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-saomiao1"></use>
                    </svg>
                    <div class="name">扫描</div>
                    <div class="fontclass">#icon-saomiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pinpai"></use>
                    </svg>
                    <div class="name">品牌</div>
                    <div class="fontclass">#icon-pinpai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanze"></use>
                    </svg>
                    <div class="name">选择</div>
                    <div class="fontclass">#icon-xuanze</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaishi"></use>
                    </svg>
                    <div class="name">开始</div>
                    <div class="fontclass">#icon-kaishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cart"></use>
                    </svg>
                    <div class="name">零售管理</div>
                    <div class="fontclass">#icon-cart</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaobaobiao"></use>
                    </svg>
                    <div class="name">小报表</div>
                    <div class="fontclass">#icon-xiaobaobiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-report-up"></use>
                    </svg>
                    <div class="name">报价单报表</div>
                    <div class="fontclass">#icon-report-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cishu"></use>
                    </svg>
                    <div class="name">ZS打赏次数</div>
                    <div class="fontclass">#icon-cishu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zonge"></use>
                    </svg>
                    <div class="name">ZS打赏总额</div>
                    <div class="fontclass">#icon-zonge</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chushihuashezhi"></use>
                    </svg>
                    <div class="name">初始化设置</div>
                    <div class="fontclass">#icon-chushihuashezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-feiyong"></use>
                    </svg>
                    <div class="name">icon-费用</div>
                    <div class="fontclass">#icon-icon-feiyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zichanpandian"></use>
                    </svg>
                    <div class="name">资产盘点</div>
                    <div class="fontclass">#icon-zichanpandian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-leibie2"></use>
                    </svg>
                    <div class="name">类目 品类 分类 类别</div>
                    <div class="fontclass">#icon-leibie2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youjiantou"></use>
                    </svg>
                    <div class="name">右箭头</div>
                    <div class="fontclass">#icon-youjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diqu"></use>
                    </svg>
                    <div class="name">地区</div>
                    <div class="fontclass">#icon-diqu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qidong-copy"></use>
                    </svg>
                    <div class="name">启动</div>
                    <div class="fontclass">#icon-qidong-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifubao"></use>
                    </svg>
                    <div class="name">支付</div>
                    <div class="fontclass">#icon-zhifubao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tingyong"></use>
                    </svg>
                    <div class="name">停用</div>
                    <div class="fontclass">#icon-tingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao-copy"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-liebiao-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liebiao1"></use>
                    </svg>
                    <div class="name">列表</div>
                    <div class="fontclass">#icon-liebiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tiaoma"></use>
                    </svg>
                    <div class="name">条码</div>
                    <div class="fontclass">#icon-tiaoma</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu11"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-camera"></use>
                    </svg>
                    <div class="name">照片</div>
                    <div class="fontclass">#icon-camera</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-108"></use>
                    </svg>
                    <div class="name">员工</div>
                    <div class="fontclass">#icon-108</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-budget"></use>
                    </svg>
                    <div class="name">预算</div>
                    <div class="fontclass">#icon-budget</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon22"></use>
                    </svg>
                    <div class="name">财政信息</div>
                    <div class="fontclass">#icon-icon22</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuzhi-copy"></use>
                    </svg>
                    <div class="name">储蓄卡</div>
                    <div class="fontclass">#icon-chuzhi-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tupian"></use>
                    </svg>
                    <div class="name">图片</div>
                    <div class="fontclass">#icon-tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caigou"></use>
                    </svg>
                    <div class="name">采购</div>
                    <div class="fontclass">#icon-caigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhichu"></use>
                    </svg>
                    <div class="name">支出</div>
                    <div class="fontclass">#icon-zhichu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouru1"></use>
                    </svg>
                    <div class="name">收入</div>
                    <div class="fontclass">#icon-shouru1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao1"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-baobiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuan"></use>
                    </svg>
                    <div class="name">会员</div>
                    <div class="fontclass">#icon-huiyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao2"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-baobiao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baobiao3"></use>
                    </svg>
                    <div class="name">报表</div>
                    <div class="fontclass">#icon-baobiao3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-changguizidian"></use>
                    </svg>
                    <div class="name">字典</div>
                    <div class="fontclass">#icon-changguizidian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinlian"></use>
                    </svg>
                    <div class="name">银联</div>
                    <div class="fontclass">#icon-yinlian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuding"></use>
                    </svg>
                    <div class="name">预订</div>
                    <div class="fontclass">#icon-yuding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-neiyileimufill"></use>
                    </svg>
                    <div class="name">内衣类目-fill</div>
                    <div class="fontclass">#icon-neiyileimufill</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#icon-zanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongsi"></use>
                    </svg>
                    <div class="name">公司</div>
                    <div class="fontclass">#icon-gongsi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinzeng"></use>
                    </svg>
                    <div class="name">新增</div>
                    <div class="fontclass">#icon-xinzeng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shengri"></use>
                    </svg>
                    <div class="name">生日</div>
                    <div class="fontclass">#icon-shengri</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon04"></use>
                    </svg>
                    <div class="name">预约</div>
                    <div class="fontclass">#icon-icon04</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yusuan"></use>
                    </svg>
                    <div class="name">预算</div>
                    <div class="fontclass">#icon-yusuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tousu"></use>
                    </svg>
                    <div class="name">投诉</div>
                    <div class="fontclass">#icon-tousu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-leibie1"></use>
                    </svg>
                    <div class="name">二级_类别切换</div>
                    <div class="fontclass">#icon-leibie1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-type"></use>
                    </svg>
                    <div class="name">二级导航-系统管理-检查类别维护</div>
                    <div class="fontclass">#icon-type</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiala1"></use>
                    </svg>
                    <div class="name">下 拉</div>
                    <div class="fontclass">#icon-xiala1</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
